<template>
	<view class="monitor-view">
		<view class="main-img-view">
			<image src="../../static/img/health-monitoring/img_400.png" mode="widthFix"></image>
		</view>
		<view style="height: 1%;"></view>
		<view class="main-img-txt">
			<view class="monitor-title">
				<view class="m-title-text">
					<text>e坐堂健康测评</text>
				</view>
			</view>
			<view class="monitor-detail">
				<view class="m-detail-one">
					<text>美国和欧洲专利，9大体质，6大系统</text>
				</view>
				<view class="m-detail-text">
					<text>报告精准清晰，深度剖析体质</text>
				</view>
			</view>
		</view>

		<view class="monitor-login-view">
			<view class="monitor-login">
				<view class="login-input">
					<view style="width: 5%;"></view>
					<view class="mobile-img">
						<image src="../../static/img/health-monitoring/icon_1.png" mode="scaleToFill"></image>
					</view>
					<view style="width: 3%;"></view>
					<view class="mobile-input">
						<input type="number" v-model="account" placeholder="请输入手机号" maxlength="11" placeholder-class="placeholderClass" />
					</view>
				</view>
			</view>
			<view class="monitor-login">
				<view class="login-input">
					<view style="width: 5%;"></view>
					<view class="mobile-img">
						<image src="../../static/img/health-monitoring/icon_2.png" mode="scaleToFill"></image>
					</view>
					<view style="width: 3%;"></view>
					<view class="mobile-input">
						<input type="text" v-model="code" placeholder="请输入右侧验证码" maxlength="11" placeholder-class="placeholderClass" />
					</view>
					<view class="mobile-uuid" @click="genImgCode()">
						<image :src="codeImg" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="monitor-login">
				<view class="login-input">
					<view style="width: 5%;"></view>
					<view class="mobile-img">
						<image src="../../static/img/health-monitoring/icon_3.png" mode="scaleToFill"></image>
					</view>
					<view style="width: 3%;"></view>
					<view class="mobile-input">
						<input type="number" v-model="pwd" placeholder="请输入短信验证码" maxlength="11" placeholder-class="placeholderClass" />
					</view>
					<view class="mobile-gencode" @click="genCode">
						<text v-bind:class="yzmClass">{{yzmStatus}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 50px;"></view>
		<view class="monitor-btn">
			<view class="m-btn-report" @click="viewReports">
				<view class="m-btn-report-txt">
					<text>
						查看健康报告
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ValidForm from '../../common/js/valid-form.js';
	let yzmTimer = 120,
		yzmTime = 119,
		yzmEnable = true;
	export default {
		onShow() {
			// window.location.href = 'http://foreignh5-test.sqqmall.com/#/pages/healthmonitor/index'
			this.ti = "e坐堂健康测评";
		},
		onLoad() {
			this.genImgCode();
		},
		computed: {
			captchaSrc() {
				return this.captcha.replace(/[\r\n]/g, "");
			}
		},
		data() {
			return {
				account: '',
				code: '',
				pwd: '',
				codeImg: '',
				yzmStatus: '获取验证码',
				yzmClass: 'mobile-gencode'
			}
		},
		methods: {
			async viewReports() {
				try {
					let valid = new ValidForm(this.account, '', '');
					if (valid.validPhoneNum(this.account) && this.pwd != "") {
						let res = await this.$request.get('/coupon-admin/ezt/eztreport/get/' + this.account + '/' + this.pwd);
						let datas = res.data;
						if (datas.code == 200) {
							// console.log("no auth")
							let url = datas.data.reportUrl;
							// appNavigateTo(url)
							// uni.navigateTo({
							// 	url:url
							// })
							window.location.href = url;
						} else if (datas.code == 30007) {
							uni.showToast({
								icon: 'none',
								title: '暂时没有您的检测报告记录'
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: datas.msg
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入短信验证码'
						})
					}

				} catch (e) {
					console.log("gen fail===" + e)
				}
			},
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			guid() {
				return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() +
					this.S4());
			},
			async genImgCode() {
				let uuid = "cms" + this.guid();
				this.codeImg = this.$serverUrl + '/coupon-admin/ezt/eztreport/captcha.jpg?uuid=' + uuid;
			},
			async genCode() {
				if (!yzmEnable) return false;
				// this.downTimer();
				let valid = new ValidForm(this.account, '', '');
				if (valid.validPhoneNum(this.account)) {
					if (this.code != "") {
						let res = await this.$request.post('/coupon-admin/ezt/eztreport/send/' + this.account + '/' + this.code, {
							data: {
								customerMobile: this.account,
								iCode: this.code
							}
						});
						if (res.data.code == 200) {
							this.downTimer();
						}
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请输入图形验证码'
						});
					}
				}
			},
			downTimer: function() {
				var that = this;
				var it = setInterval(function() {
					yzmEnable = false;
					that.yzmStatus = yzmTime + '秒后重发';
					that.yzmClass = 'yzms';
					yzmTime--;
					if (yzmTime == 0) {
						yzmTime = 119;
						yzmEnable = true;
						that.yzmClass = 'mobile-gencode';
						that.yzmStatus = '获取验证码';
						clearInterval(it);
					}
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	.yzms {
		color: #c0c0c0;
		font-size: 28px;
	}
	
	.placeholderClass{
		// margin-top: 10px;
	}

	.monitor-view {
		width: 100%;
		background-color: #fff6ee;

		.main-img-view {
			width: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.main-img-txt {
			.monitor-title {
				width: 100%;
				font-size: 40px;
				color: #ffa65e;
				font-weight: 900;
				display: flex;
				justify-content: center;
			}

			.monitor-detail {
				width: 100%;
				height: 160px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 30px;
				color: #ff866a;
			}
		}

		.monitor-btn {
			width: 100%;
			// height: 20%;
			display: flex;
			justify-content: center;
			align-items: center;

			.m-btn-report {
				width: 500px;
				height: 100px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50px;
				background: -webkit-linear-gradient(left, #FE7F4E, #FF704F);
				background: -o-linear-gradient(right, #FE7F4E, #FF704F);
				background: -moz-linear-gradient(right, #FE7F4E, #FF704F);
				background: linear-gradient(to right, #FE7F4E, #FF704F);
				color: white;
				font-weight: 600;
			}
		}

		.monitor-login-view {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 28px;

			.monitor-login {
				width: 90%;
				height: 100px;

				.login-input {
					width: 100%;
					height: 90px;
					background-color: white;
					border-radius: 60px;
					display: flex;
					align-items: center;

					.mobile-img {
						width: 45px;
						height: 45px;

						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.mobile-input{
						width: 60%;
						height: 45px;
						input{
							width: 100%;
							height: 100%;
						}
					}

					.mobile-gencode {
						color: #ff7521;
						font-size: 28px;
					}

					.mobile-gettedcode {
						color: #c0c0c0;
						font-size: 28px;
					}

					.mobile-uuid {
						// background-color: red;
						width: 200px;
						height: 80px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
